
// ❤ 函数式组件
import React, { useState } from 'react'
// ❤ useState 为函数式组件实现数据监听与修改

import axios from "axios";
import { Toast } from "react-vant"; //轻提示


function Login(props) {
  // props 接收参数
  // 使用方式：useState 一个参数，设置默认值
  // 返回一个数组，数组长度为2   ❤ 数组中有：1.定义的变量 2.修改变量的方法
  const [phone, setPhone] = useState(""); //手机号
  const [pwd, setPwd] = useState(""); //密码

  const toLogin = () => {
    // console.log(phone, pwd);
    let user = { phone, pwd } //传递给后端的参数

    // post方式请求登录的接口 
    axios.post("/tologin", user).then(res => {
      if (res.data.code === 200) {
        //登录成功，本地存储数据，跳转到上一页
        localStorage.setItem("user", JSON.stringify(user));
        props.history.go(-1)
      } else {
        //登录失败，提示用户
        Toast.fail(res.data.msg)
      }
    })

  }

  return (
    <div className='login'>
      <p><span>手机号：</span><input type="text" value={phone} onChange={(e) => {
        setPhone(e.target.value)
      }} /></p>

      <p><span>密码：</span><input type="text" value={pwd} onChange={(e) => {
        setPwd(e.target.value)
      }} /></p>

      {/* 通过变量名调用  */}
      <p><button onClick={toLogin}>登录</button></p>
    </div>
  )
}

export default Login


// ❤ 本地存储：localStorage
// 【存】：对象格式的数据
// localStorage.setItem("user", JSON.stringify(user));
// 【取】：JSON.parse((localStorage.getItem())


// ❤ 函数式组件和class组件最大的区别在于【this】上 